<template>
    <view>
        <tm-cascader 
        :value="_value"
        @update:modelValue="_value=$event"
        @change="changData"
        :default-value="_def" 
        :color="props.color" 
        :active-color="props.activeColor" 
        :height="props.height" 
        :slotTabHeigth="88"
        :data="cityAlldata"></tm-cascader>
    </view>
</template>
<script lang="ts" setup>
/**
 * 地区级联选择器
 * @description 这是一个城市级联选择器。基于tm-cascader级联选择器
 */
import { Ref,ref, getCurrentInstance, isProxy } from "vue"
import { childrenData } from "./interface"
import {provinceData} from "../../tool/static/province";
import {cityData} from "../../tool/static/city";
import {areaData} from "../../tool/static/area";
import tmCascader from "../tm-cascader/tm-cascader.vue";
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
    /**
     * 赋值方式，
     * id:城市id为返选赋值。
     * name:以城市名称作为返选和赋值。
     */
    selectionModel:{
        type:String,
        default:'name'
    },
    /**
     * 城市选择的级别
     * province:省级别。
     * city:省，市
     * area:省，市，县/区.
     */
    cityLevel:{
        type:String,
        default:'area'
    },
    /**
     * 热门城市选择。
     */
    hotCity:{
        type:Array,
        default:()=>[
            {name:"南昌市",data:["江西省","南昌市",'红谷滩区']},
            {name:"杭州市",data:["浙江省","杭州市",'余杭区']},
        ]
    },
        /**
     * 默认选中的数据
     */
    defaultValue: {
        type: Array,
        default: () => []
    },
    /**
     * 双向绑定输入数据
     */
    modelValue: {
        type: Array,
        default: () => []
    },
    height: {
        type: Number,
        default: 650
    },
    //激活状态下的颜色。
    activeColor: {
        type: String,
        default: 'primary'
    },
    // 背景主题
    color:{
        type: String,
        default: 'white'
    },
})
const cityAlldata = ref(chiliFormatCity_area());
let _value = ref([])
let _def = isProxy(props.defaultValue)?props.defaultValue:ref(props.defaultValue)
function changData(e){
    emits('update:modelValue',e)
}


//格式化数据格式。
function chiliFormatCity_area() {
    let list:Array<childrenData> = [];
    provinceData.forEach((item:childrenData,index:number)=>{
        list.push({
            id:String(props.selectionModel=='id'?item.value:item.label),
            text:String(item.label),
            children:[]
        })
    })
    if(props.cityLevel=='province') return list;
    cityData.forEach((item:childrenData,index:number)=>{
        item.forEach((citem:childrenData,cindex:number)=>{
            list[index].children.push({
                id:props.selectionModel=='id'?citem.value:citem.label,
                text:citem.label,
                children:[]
            })
        })
    })
    if(props.cityLevel=='city') return list;
    list.forEach((item,index)=>{
        item.children.forEach((citem,cindex:number)=>{
            areaData[index][cindex].forEach(jitem=>{
                list[index].children[cindex].children.push({
                    id:props.selectionModel=='id'?jitem.value:jitem.label,
                    text:jitem.label,
                })
            })
        })
    })
    return list;
}

</script>